@import "ui-variables";

@checkers-size: 10px;
@spacing: @component-padding/2;

.checkerBoard(@checkers-color, @background) {
  background-color: @background;
  background-size: @checkers-size @checkers-size;
  background-position: 0 0, @checkers-size/2 @checkers-size/2;
  background-image: linear-gradient(45deg, @checkers-color 25%, transparent 25%, transparent 75%, @checkers-color 75%, @checkers-color),
                    linear-gradient(45deg, @checkers-color 25%, transparent 25%, transparent 75%, @checkers-color 75%, @checkers-color);
}

.svg-preview {
  background-color: @base-background-color;

  .image-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: @spacing;

    border-bottom: 1px solid @panel-heading-border-color;
    background-color: @panel-heading-background-color;

    a {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin: @spacing;

      vertical-align: middle;
      font-size: 0;

      border-radius: 22px;
      border: 2px solid #fff;
      box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 0 0 1px hsla(0,0%,0%,.1), 0 2px 2px hsla(0,0%,0%,.2);

      &:hover {
        border-color: #ccc;
      }
      &:active {
        border-color: #999;
      }
    }

    .btn-group {
      margin: @spacing;
    }

    .reset-zoom-button {
      min-width: 5em;
    }
  }

  .image-canvas {
    box-sizing: border-box;

    overflow: scroll;
    width: 100%;
    height: calc(~"100% - 44px");

    padding: @spacing;

    flex: 1 1 0;
    display: flex;
    overflow: auto;

    svg {
      flex: none;
      margin: auto;
    }
  }

  // Background color
  &[background="white"], .image-controls-color-white {
    .checkerBoard(rgb(255, 255, 255), rgb(227, 227, 227))
  }
  &[background="black"], .image-controls-color-black {
    .checkerBoard(rgb(0, 0, 0), rgb(43, 43, 43))
  }
}
